<template>
  <div>
    <NuxtLayout name="backgroud">
      <ul class="statistics" v-loading="loading">
        <li>
          <h1 class="kaiti">分类文章统计</h1>
          <div id="allChart"></div>
        </li>
        <li >
          <h1 class="kaiti">前端文章统计</h1>
          <div id="webChart"></div>
        </li>
        <li>
          <h1 class="kaiti">后端文章统计</h1>
          <div id="backEndChart"></div>
        </li>
        <li>
          <h1 class="kaiti">数据库文章统计</h1>
          <div id="databaseChart"></div>
        </li>
        <li>
          <h1 class="kaiti">其他文章统计</h1>
          <div id="otherChart"></div>
        </li>
        <!-- <div style="width: 300px;height: 300px;background: transparent;" id="myEcharts"></div> -->
      </ul>
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import { ref,nextTick,onMounted} from "vue";
import { getStatistics } from "../../service/api/statistics"
import * as echarts from "echarts";

const initData = ref()
const loading = ref(false)
//查询统计数据
const getStatisticsData = async () => {
  await nextTick()
  loading.value = true
  const res:any = await getStatistics({})
  const data = res.data._value
  if(data.code == 200){
    initData.value = data.data
    console.log(initData.value)
    initAllChart(initData.value.all)
    initWebChart(initData.value.web)
    initBackEndChart(initData.value.backEnd)
    initDatabaseChart(initData.value.database)
    initOtherChart(initData.value.other)
    loading.value = false
  }
}
//分类文章统计
const initAllChart = (data:any) => {
  let xData = data.map((i:any) => {
    return i.name
  })
  let yData = data.map((i:any) => {
    return i.num
  })
  let chart = echarts.init(document.getElementById("allChart"));
    chart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: yData,
        type: 'line'
      }
    ]
  })
}
//前端文章统计
const initWebChart = (data:any) => {
  let xData = data.map((i:any) => {
    return i.name
  })
  let yData = data.map((i:any) => {
    return i.num
  })
  let chart = echarts.init(document.getElementById("webChart"));
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: yData,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })
}
//后端文章统计
const initBackEndChart = (data:any) => {
  let xData = data.map((i:any) => {
    return i.name
  })
  let yData = data.map((i:any) => {
    return i.num
  })
  let chart = echarts.init(document.getElementById("backEndChart"));
  chart.setOption({
    polar: {
      radius: [30, '80%']
    },
    radiusAxis: {
      max: 4
    },
    angleAxis: {
      type: 'category',
      data: xData,
      startAngle: 75
    },
    tooltip: {},
    series: {
      type: 'bar',
      data: yData,
      coordinateSystem: 'polar',
      label: {
        show: true,
        position: 'middle',
        formatter: '{b}: {c}'
      }
    },
    animation: false
  })
}
//数据库文章统计
const initDatabaseChart = (data:any) => {
  let xData = data.map((i:any) => {
    return i.name
  })
  let yData = data.map((i:any) => {
    return i.num
  })
  let chart = echarts.init(document.getElementById("databaseChart"));
  chart.setOption({
    polar: {
      radius: [30, '80%']
    },
    angleAxis: {
      max: 4,
      startAngle: 75
    },
    radiusAxis: {
      type: 'category',
      data: xData
    },
    tooltip: {},
    series: {
      type: 'bar',
      data: yData,
      coordinateSystem: 'polar',
      label: {
        show: true,
        position: 'middle',
        formatter: '{b}: {c}'
      }
    }
  })
}
//其他文章统计
const initOtherChart = (data:any) => {
  let aData = data.map((i:any) =>{
    return {
      name:i.name,
      value:i.num
    }
  })
  let chart = echarts.init(document.getElementById("otherChart"));
  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '其他文章统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: aData
      }
    ]
  })
}
onMounted(() =>{
  getStatisticsData()
})
</script>
<script lang="ts">
  export default {
    layout:false
  }
</script>
<style scoped lang="scss">
.statistics{
  width: 80%;
  min-height:calc(100vh - 240px);
  background-color: rgba($color: #fff, $alpha: .6);
  margin: 20px auto;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
  li{
    height: 400px;
    width: 40%;
    margin-right: 20px;
    margin-bottom: 20px;
    background: transparent;
    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
    h1{
      font-size: 22px;
      color: $yun-color;
      text-align: center;
    }
    div{
      width: 100%;
      height: 360px;
      background: transparent;
    }
  }
}
</style>